<template>
  <free-app bgType="image" :showNavbar="true" :navbar="navbarOptions">
    <view class="p-3 flex flex-col gap-3">
      <!-- serach -->
      <view class="flex flex-col gap-3 p-3 bg-white rounded-3 radio shadow-1">
        <view class="text-size-3 font-500 color-text-1"> 配送方式 </view>
        <wd-radio-group
          v-model="formData.delivery"
          shape="button"
          checked-color="#0F57C2"
          size="large"
          @change="change"
        >
          <wd-radio
            :value="item.value"
            v-for="(item, index) in deliveryList"
            :key="index"
            >{{ item.name }}</wd-radio
          >
        </wd-radio-group>
      </view>

      <view
        class="flex flex-col gap-4 p-3 rounded-[20rpx] bg-white shadow-1"
        v-show="formData.delivery === DELIVERY_TYPE.EXPRESS.value"
      >
        <view class="color-text-1 font-500 text-size-3"> 收货地址 </view>
        <view
          class="bg-fill-1 rounded-[20rpx] p-3 gap-[10rpx] flex"
          v-if="!formData.addressId"
          @click="toaddress"
        >
          <image
            src="/static/images/icon/location.png"
            class="size-[32rpx]"
            mode="scaleToFill"
          />
          <text class="text-color-2">暂未添加过收货地址，点击去添加</text>
        </view>
        <view
          class="bg-fill-1 rounded-[20rpx] p-3 gap-[20rpx] flex items-center"
          v-else
        >
          <view class="flex flex-col gap-[12rpx]">
            <view class="flex gap-[20rpx] items-center">
              <text>海森堡</text> <text>123123asd</text>
            </view>
            <view class="color-text-2 text-size-1">
              广东 深圳市 龙岗区 龙城街道 京基御景时代大厦南区外卖柜子
            </view>
          </view>
          <view class="shrink-0 text-color-1"> 修改 </view>
        </view>
      </view>
      <view class="flex flex-col gap-4 p-3 rounded-[20rpx] bg-white shadow-1">
        <view class="color-text-1 font-500 text-size-3"> 商品清单 </view>
        <view v-for="(item, index) in formData.goods" :key="index">
          <GoodsCard :data="item" :showSpecBtn="true"> </GoodsCard>
        </view>
        <view class="w-full h-2 bg-fill-1"></view>
        <view class="flex justify-between items-center">
          <view class="color-text-3 text-size-[24rpx]"
            >共 {{ formData.total }} 件</view
          >
          <view class="text-size-1 font-400"
            >合计
            <GsMoney
              :money="76"
              moneySize="32rpx"
              :showUnitIcon="true"
              moneyUnitSize="24rpx"
            ></GsMoney
          ></view>
        </view>
      </view>
      <view
        class="flex flex-col p-3 rounded-[20rpx] bg-white shadow-1 gap-3 custom-root"
      >
        <view class="color-text-1 font-500 text-size-3"> 请选择配送方式 </view>
        <wd-picker
          :columns="expressList"
          v-model="formData.expressType"
          :align-right="true"
          :label-key="'name'"
          label="快递类型"
          @confirm="handleConfirm"
        >
          <template #label>
            <image
              src="/static/images/icon/delivery.png"
              class="size-[32rpx]"
              mode="scaleToFill"
            />
            快递类型
          </template>
        </wd-picker>
      </view>
      <view class="flex flex-col gap-4 p-3 rounded-[20rpx] bg-white shadow-1">
        <view class="color-text-1 font-500 text-size-3"> 支付方式 </view>
        <view>
          <wd-radio-group v-model="formData.payType" shape="dot">
            <wd-radio :value="1"
              ><view class="flex items-center gap-[12rpx]">
                <image
                  src="/static/images/icon/wx.png"
                  class="w-[36rpx] h-[32rpx]"
                  mode="scaleToFill"
                />
                微信支付
              </view></wd-radio
            >
          </wd-radio-group>
        </view>
      </view>
      <view class="flex flex-col p-3 rounded-[20rpx] bg-white shadow-1 gap-3">
        <view class="color-text-1 font-500 text-size-3"> 买家留言 </view>
        <view class="bg-fill-1 textareaClass h-[150rpx]">
          <wd-textarea
            v-model="formData.remark"
            placeholder="对卖家说点什么吧"
            placeholderStyle="color:'#86909C'"
          />
        </view>
      </view>
    </view>
    <GsFixedBottom>
      <view
        class="flex w-full px-4 pb-[30rpx] justify-end items-center gap-[20rpx]"
      >
        <view class="color-text-3 text-size-[24rpx]"
          >已选 {{ formData.total }} 件</view
        >
        <view class="text-size-1 font-400"
          >合计
          <GsMoney
            :money="76"
            moneySize="32rpx"
            :showUnitIcon="true"
            moneyUnitSize="24rpx"
          ></GsMoney
        ></view>
        <button
          class="btn bg-danger-6 text-white px-[40rpx]"
          @click="submitOrder"
        >
          提交订单
        </button>
      </view>
    </GsFixedBottom>
  </free-app>
</template>

<script setup>
import { ref } from "vue";
import { DELIVERY_TYPE, convertDictToArray, EXPRESS_TYPE } from "@/utils/dict";
import { onUnload, onLoad } from "@dcloudio/uni-app";
import GsFixedBottom from "@/components/GsFixedBottom/index.vue";
import GsMoney from "@/components/GsMoney/index.vue";
import GoodsCard from "@/components/goods-card/index.vue";

// const userStore = useUserStore();
const navbarOptions = {
  title: "购物车",
  placeholder: true,
  remark: "",
};
const formData = ref({
  delivery: 1,
  payType: 1,
  addressId: "",
  address: {
    name: "海森堡",
    phone: "123123asd",
    address: "广东 深圳市 龙岗区 龙城街道 京基御景时代大厦南区外卖柜子",
  },
  expressType: EXPRESS_TYPE.FREE.value,
});
const goods = ref(
  new Array(2).fill(null).map(() => ({
    imgUrl: "/static/images/temp/logo.png",
    title: "移修适用于苹果11 屏幕（标准）",
    description: "适配型号苹果12/苹果12Pro",
    price: "129.9",
    stock: 129,
    num: 0,
  }))
);
const columns = ref([
  "选项1",
  "选项2",
  "选项3",
  "选项4",
  "选项5",
  "选项6",
  "选项7",
]);
const value = ref("选项1");

function handleConfirm({ value }) {
  value.value = value;
}
const deliveryList = convertDictToArray(DELIVERY_TYPE);
const expressList = convertDictToArray(EXPRESS_TYPE);
const fetchGoodsOrder = async () => {
  formData.value = { ...formData.value, goods: goods.value, total: 1 };
};
const toaddress=()=>{
    uni.navigateTo({
        url:'/pagesAddress/index'
    })
}
const submitOrder = async () => {};
onLoad(async () => {
  await fetchGoodsOrder();
});
onUnload(() => {
  uni.$emit("refreshhome");
});
</script>

<style lang="scss" scoped>
.radio {
  :deep() {
    .wd-radio-group {
      display: flex;
      justify-content: space-between;
      gap: 24rpx;
      .wd-radio {
        width: 100%;
        .wd-radio__label {
          width: 100%;
          height: 85rpx !important;
          line-height: 85rpx !important;
          padding: 0 !important;
          border-radius: 88rpx;
          // padding: 0rpx 24rpx;
        }
      }
    }
  }
}
.textareaClass {
  background-color: #f7f8fa;
  :deep() {
    .wd-textarea {
      background-color: #f7f8fa;
      border-radius: 32rpx;
      .wd-textarea__value {
        background-color: #f7f8fa;
        textarea {
          height: 100rpx;
        }
      }
    }
  }
}
.custom-root {
  /* 覆盖根节点样式 */

  :deep() {
    .wd-picker__cell {
      /* 覆盖根节点样式 */
      padding: 0;
    }
  }
}
</style>
